<!--套餐内容-->
<template>
  <view class="combo-wrapper">
    <text class="title">云认养选择</text>
    <scroll-view
      scroll-y="true"
      class="sv-content"
    >
      <scroll-view
        :scroll-x="true"
        class="sv-combo"
      >
        <block
          v-for="(item, index) in combos"
          :key="item"
        >
          <view
            class="combo-item-wrapper flex-center flex-y"
            @click="select(index)"
          >
            <view
              class="flex flex-y flex-center"
              style="z-index: 100"
              :class="{ 'combo-item-normal': index !== selectIdx }"
            >
              <text class="cycle">
                {{
                  item.cycleUnit == '1'
                    ? `${item.cycleNumber}个月`
                    : `${item.cycleNumber}年`
                }}
              </text>
              <text class="price">¥{{ item.price }}</text>
              <text class="intro">{{ item.description }}</text>
            </view>
            <view
              v-if="index === selectIdx"
              class="select-bg"
            >
              <u--image
                src="/static/cloudAdopt/bg_cloud_adopt_package.png"
                width="212rpx"
                height="232rpx"
              ></u--image>
            </view>
          </view>
        </block>
      </scroll-view>
      <view
        class="flex align-center title"
        style="margin-top: 32rpx"
      >
        <u--image
          src="/static/cloudAdopt/icon_cloud_adopt_prerogative.png"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <text>认养小主专属权益</text>
      </view>
      <rich-text
        v-if="combos.length > 0"
        class="combo-rights"
        :nodes="combos[selectIdx].interestDescription"
      >
        <!-- {{ replaceCloudAdoptRights(combos[selectIdx].interestDescription) }} -->
      </rich-text>
      <view class="flex align-center adopt-cycle">
        <u--image
          src="/static/cloudAdopt/icon_cloud_adopt_cycle.png"
          width="28rpx"
          height="28rpx"
        ></u--image>
        <text style="margin-left: 12rpx">
          云认养周期：{{ getAdoptStartTime() }}至{{ getAdoptEndTime() }}
        </text>
      </view>
    </scroll-view>
    <view class="flex-center">
      <u-checkbox-group @change="checkboxChange">
        <u-checkbox
          active-color="#73EA46"
          shape="circle"
          label-size="24rpx"
          label-color="#666666"
          name="1"
          size="28rpx"
          label="我已阅读并同意"
        ></u-checkbox>
      </u-checkbox-group>
      <text
        class="adopt-protocol"
        @click="toProtocol"
      >
        《附近有喵云认养协议》
      </text>
    </view>
    <view
      class="adopt-btn"
      @click="toPay"
    >
      我要认养
    </view>
  </view>
</template>

<script>
import { getCloudAdoptCombo } from '@/api/pet-core.js';
import { cloudAdoptServiceUrl } from '@/const/webPageUrl.js';
import { navigateToWebView, replaceCloudAdoptRights } from '@/utils/tools.js';
import { WEB_VIEW_TYPE } from '@/const/index.js';

export default {
  props: {
    startTime: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      cloudAdoptServiceUrl,
      replaceCloudAdoptRights,
      WEB_VIEW_TYPE,
      selectIdx: 0,
      combos: [],
      agreePotocol: false,
    };
  },
  mounted() {
    this.getCloudAdoptCombo();
  },
  methods: {
    checkboxChange(value) {
      this.agreePotocol = value.length > 0;
    },
    select(index) {
      this.selectIdx = index;
    },
    getCloudAdoptCombo() {
      const that = this;
      getCloudAdoptCombo().then((res) => {
        console.log('getCloudAdoptCombo', res.data.records);
        that.combos = res.data.records;
        that.combos.map((item) => {
          item.interestDescription = replaceCloudAdoptRights(
            item.interestDescription
          );
        });
      });
    },
    //开始时间
    getAdoptStartTime() {
      if (this.startTime) {
        return this.$moment(this.startTime).format('YYYY-MM-DD');
      }
      return this.$moment(new Date()).format('YYYY-MM-DD');
    },

    getAdoptEndTime() {
      if (this.combos.length === 0) {
        return;
      }
      const item = this.combos[this.selectIdx];
      let date = new Date();
      if (this.startTime) {
        date = new Date(this.startTime);
      }
      if (item.cycleUnit === '1') {
        date.setMonth(Number(item.cycleNumber) + date.getMonth());
      } else {
        date.setFullYear(Number(item.cycleNumber) + date.getFullYear());
      }
      return this.$moment(date).format('YYYY-MM-DD');
    },
    toProtocol() {
      navigateToWebView({
        url: cloudAdoptServiceUrl,
        type: WEB_VIEW_TYPE.PET,
        title: '附近有喵云认养协议',
      });
    },
    toPay() {
      if (!this.agreePotocol) {
        uni.showToast({
          title: '请先同意云认养协议',
          icon: 'none',
        });
        return;
      }
      this.$emit('surePay', this.combos[this.selectIdx].id);
    },
  },
};
</script>

<style lang="scss">
.combo-wrapper {
  background-color: #ffffff;
  position: relative;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  padding: 26rpx 24rpx;
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
  }
  .sv-content {
    height: 100vh * 0.5;
    .sv-combo {
      white-space: nowrap;
      width: 100%;
      margin-top: 24rpx;
      height: 232rpx;
      .combo-item-wrapper {
        position: relative;
        display: inline-flex;
        margin-right: 16rpx;
        width: 212rpx;
        .select-bg {
          position: absolute;
          top: 0;
          height: 232rpx;
        }
        .combo-item-normal {
          width: 212rpx;
          background: #f3f3f3;
          border-radius: 16rpx;
          padding-bottom: 20rpx;
        }
        .cycle {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-top: 30rpx;
        }
        .price {
          font-weight: 700;
          font-size: 44rpx;
          color: #333333;
          margin-top: 20rpx;
        }
        .intro {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
    .combo-rights {
      background: #fafafa;
      border-radius: 16rpx;
      padding: 24rpx;
      font-size: 24rpx;
      color: #333333;
      margin-top: 24rpx;
    }
    .adopt-cycle {
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      margin-top: 18rpx;
    }
    .adopt-protocol {
      font-size: 24rpx;
      color: #333333;
    }
  }
  .adopt-btn {
    height: 96rpx;
    background: #ff7ce3;
    border-radius: 48rpx;
    line-height: 96rpx;
    margin: 24rpx 48rpx 0 48rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
    color: #ffffff;
  }
}
</style>
